import ReactDOM from 'react-dom'
import React, { Component } from 'react'

// 类组件定义状态
class App extends Component {

  state = {
    count: 0
  }

  // click的处理函数
  handleClick = (e) => {
    console.log(e)
    console.log(this)
  }

  render() {
    return (
      <div>
        <div>计数器：{this.state.count}</div>
        {/* 将this.handleClick赋值给onClick，调用函数通过onClick，所以此时的this是undefined */}
        {/* 解决this问题，方式有三种： */}
        {/* 1. 绑定的时候通过箭头函数包裹 处理函数 */}
        {/* <button onClick={(e)=>this.handleClick(e)}>+1</button> */}
        {/* 2. 绑定的时候通过bind */}
        {/* <button onClick={this.handleClick.bind(this)}>+1</button> */}
        {/* 3. 定义处理函数使用箭头函数*/}
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}

// 结论：三种方式都可以，建议第三种，事件处理函数定义为箭头函数

ReactDOM.render(<App />, document.getElementById('root'))
